<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
    >
      <el-menu-item index="1">干预方案</el-menu-item>
    </el-menu>
    <div>
      <br />
      <el-date-picker
        v-model="analysis.value"
        type="year"
        @change="changeValue"
        placeholder="选择年"
      >
      </el-date-picker>
    </div>
    <div id="chart" class="tu"></div>
    <el-table
      :data="total"
      height="500"
      stripe
      @select="handleSelect"
      @select-all="handleSelectAll"
    >
      <el-table-column
        type="selection"
        :selectable="checkSelectable"
      ></el-table-column>
      <el-table-column prop="username" label="姓名"> </el-table-column>
      <el-table-column prop="fanum" label="干预方案总量"></el-table-column>
      <el-table-column prop="hfnum" label="干预回访总量">
        <template slot-scope="scope">
          {{ scope.row.hfnum == null ? 0 : scope.row.hfnum }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      analysis: { value: null },
      activeIndex: "1",
      selectedMonths: [],
      total: [],
      seriesArray: [],
      february: { username: null, months: [] },
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    generateRandomColor() {
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    checkSelectable(row) {
      if (this.analysis.value === null) {
        return false; // 禁用复选框
      }
      return true; // 允许选择复选框
    },
    info() {
      this.axios.post("/rear/LYN/gyCount", this.analysis).then((req) => {
        this.total = req.data;
        });
    },
    handleSelect(selection, row) {
      if (selection.length > 0) {
        this.february.username = row.username;
        this.axios.post("/rear/LYN/gytiaoshu", this.february).then((req) => {
          const newLine = {
            name: row.name,
            data: req.data,
            type: "line",
            itemStyle: {
              color: this.generateRandomColor(), // 设置线的颜色为蓝色
            },
          };


       

          console.log(this.total.variableColor);
          this.seriesArray.push(newLine);
          this.renderChart();
        });
      } else {
        this.seriesArray = [];
        let chart = echarts.getInstanceByDom(document.getElementById("chart"));
        if (chart == null) {
          chart = echarts.init(document.getElementById(div));
        }
        chart.clear();
      }
    },
    handleSelectAll(selection) {
      // 全部行选择
      if (selection.length === this.total.length) {
        console.log("全选");
      } else {
        this.seriesArray = [];
        let chart = echarts.getInstanceByDom(document.getElementById("chart"));
        if (chart == null) {
          chart = echarts.init(document.getElementById(div));
        }
        chart.clear();
      }
    },
    renderChart() {
      const chartDom = document.getElementById("chart");
      const myChart = echarts.init(chartDom);
      const option = {
        xAxis: {
          type: "category",
          data: this.selectedMonths,
        },
        yAxis: {
          type: "value",
        },
        series: this.seriesArray,
      };

      option && myChart.setOption(option);
    },
    changeValue() {
      this.axios.post("/rear/LYN/gyCount", this.analysis).then((req) => {
        this.total = req.data;
        this.selectedMonths = [];
        if (this.analysis.value) {
          const selectedYear = this.analysis.value.getFullYear();
          for (let i = 1; i <= 12; i++) {
            if (i >= 10) {
              this.selectedMonths.push(`${selectedYear}-${i}`);
            } else {
              this.selectedMonths.push(`${selectedYear}-0${i}`);
            }
          }
          this.february.months = this.selectedMonths;
        }
        this.renderChart();
      });
    },
  },
  created() {
    this.info();
  },
};
</script>
<style>
.tu {
  width: 100%;
  height: 600px;
}
</style>